<template>
    <div>
        <v-md-editor v-model="val" height="800px" @change="change" v-show="show == true"></v-md-editor>
        <div v-html="md"></div>
    </div>
</template>

<script>
import marked from 'marked'
import prism from "prismjs";

export default {
    props: {
        val: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            md: null,
            show: false
        }
    },
    methods: {
        change() {
            let reg = new RegExp("<pre", "g");
            let content = this.md = marked(this.val);
            let str = content.replace(reg, `<pre class="line-numbers"`);
            this.md = str;
            setTimeout(() => {
                prism.highlightAll();
            }, 0);
        },
    }
}
</script>

<style>

</style>